<template>
  <div class="header">
    <div class="header-main justify">
      <a
        href="javascript:void(0)"
        class="dib center-body home-icon"
        @click.prevent="home"
        @mouseover="hover = true"
        @mouseleave="hover = false"
      >
        <img :src="src" width="100%" />
      </a>
      <header-nav class="dib center-body"></header-nav>
      <language-switch class="dib center-body"></language-switch>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      hover: false
    }
  },
  computed: {
    src () {
      return require('../assets/home_icon' + ((this.active || this.hover) ? '_hover' : '') + '.png')
    },
    active () {
      return this.$route.name === 'home'
    }
  },
  methods: {
    home () {
      if (this.$route.name !== 'home') {
        this.$router.push('/')
      }
    }
  }
}
</script>
